<template>
	<view class="content">
		<view class="baoxiao-tab">
			<view class="tab-li" :class="user_status == item.user_status ?'active':''" v-for="(item,index) in tabList"
				:key="index" @click="orderTab(item)">
				<text>{{item.name}}</text>
			</view>
		</view>
		<!-- 订单列表 -->
		<view class="order-list" v-if="orderList.length > 0">
			<view class="order-li" @click="jump('/pages/user/order/order-xq?id='+item.id+'&index='+index)"
				v-for="(item,index) in orderList" :key="index">
				<view class="order-li-top">
					<text>提交时间：{{ item.createtime }}</text>
					<text class="type" v-if="item.user_status == 0">已提交</text>
					<text class="type" v-if="item.user_status == 1">维修中</text>
					<text class="type" v-if="item.user_status == 2">待确认</text>
					<text class="type" v-if="item.user_status == 3">已完成</text>
				</view>
				<view class="order-cen">
					<view style="font-weight: bold;font-size: 42rpx;margin-bottom: 26rpx;color: #333;">
						报修类目：{{item.classification_name}}</view>
					<view>维修地点：{{item.report}}</view>
				</view>
				<view class="order-bot">
					<view class=" btn2" @click.stop="order_confirm(item.id,index)" v-if="item.user_status == 2">
						<text>去确认</text>
					</view>
					<!-- <view class=" btn2" v-if="item.user_status == 2">
						<text>去确认</text>
					</view> -->
					<view class=" btn2" v-if="item.user_status == 0" @click.stop="order_quash(item.id,index)">
						<text>撤销订单</text>
					</view>
					<view class=" btn1">
						<text>查看详情</text>
					</view>

				</view>
			</view>
		</view>
		<view class="" v-else style="margin-top: 15vh;">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
		<u-modal v-model="show"  title="撤销订单" show-cancel-button="true" @confirm="confirm" @cancel="cancel">
			<view class="warp">
				<view>撤销订单原因：</view>
				<textarea name="" id="" cols="30" rows="10" placeholder="请输入撤销申请原因" v-model="cancelReason"></textarea>
			</view>
		</u-modal>
		<!-- <u-modal v-model="isShow" title="评价" confirm-text="确认" @confirm="confirm1" @cancel="cancel1" show-cancel-button >
			<view class="slot-content">
				<u-radio-group v-model="value">
					<u-radio name="1">满意</u-radio>
					<u-radio name="2">不满意</u-radio>
				</u-radio-group>
			</view>
		</u-modal> -->
		<u-modal v-model="isShow1" title="提示" confirm-text="确认" @confirm="sure" @cancel="cancel1" show-cancel-button >
			<view class="slot-content">
				
				<view class="shenping">
					审核：
				</view>
				<u-radio-group v-model="value1">
					
					<u-radio name="2">通过</u-radio>
					<u-radio name="1">不通过</u-radio>
				</u-radio-group>
				<view class="" style="margin-top: 20rpx;" v-if="value1 == 2">
					
					<view class="shenping">
						评价：
					</view>
					<u-radio-group v-model="value">
						<u-radio name="1">满意</u-radio>
						<u-radio name="2">不满意</u-radio>
					</u-radio-group>
				</view>
				<view v-if="value1 == 1">
					<textarea name="" id="" cols="30" rows="10" placeholder="请输入撤销申请原因" v-model="failMessage"></textarea>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				user_status: -1,
				pages: 1,
				last_page: 2,
				tabList: [{
						type: '',
						name: '全部',
						user_status: -1
					},
					{
						type: '',
						name: '已提交',
						user_status: 0
					},
					{
						type: '',
						name: '维修中',
						user_status: 1
					},
					{
						type: '',
						name: '待确认',
						user_status: 2
					},
					{
						type: '',
						name: '已完成',
						user_status: 3
					},
				],
				orderList: [],
				orderId:'',
				cancelReason: '',
				isShow: false,
				isShow1: false,
				value: '1',
				value1: '2'
			}
		},
		onShow() {
			this.getOrderList()
		},
		onLoad(e) {
			this.user_status = e.user_status
			this.getOrderList()
			let that = this
			uni.$on('yiwancheng', function(res) {
				that.pages = 1
				that.orderList = []
				that.getOrderList()
			})
		},
		onPullDownRefresh() {
			this.pages = 1
			this.orderList = []
			this.getOrderList()
		},
		onReachBottom() {
			if (this.last_page > this.pages) {
				this.pages++
				this.orderList = []
				this.getOrderList()
			}
		},
		methods: { 
			confirm1(){
				this.$u.post('/index/evaluate', {
					id: this.orderId,
					evaluate: this.value,
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: '评价成功'
					})
					this.isShow = false
					this.pages = 1
					this.orderList = []
					this.getOrderList()
				})
			},
			cancel1(){
				this.isShow = false;
				this.isShow1 = false;
				this.pages = 1
				this.orderList = []
				this.getOrderList()
			},
			orderTab(item) {
				this.pages = 1
				this.orderList = []
				this.user_status = item.user_status
				this.getOrderList()
			},
			order_quash(id) {			
				this.show = true
				this.orderId = id
			},
			cancel() {
				this.show = false
			},
			confirm() {
				console.log(this.cancelReason)
				this.$u.post('/index/cancel_order', {
					id: this.orderId,
					cancel_order_reason: this.cancelReason,
				}).then(res => {
					// console.log(res)
					uni.showToast({
						icon: 'success',
						title: '撤銷成功'
					})
					this.show = false
					this.pages = 1
					this.orderList = []
					this.getOrderList()
				})
			},
			// 获取报修订单
			getOrderList() {
				this.$u.post('/index/list', {
					user_status: this.user_status == -1 ? '' : this.user_status,
					page: this.pages,
					size: 20
				}).then(res => {
					// console.log(res)
					this.last_page = res.data.last_page
					this.orderList = res.data.data
				})
			},
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
			// order_confirm
			order_confirm(id, index) {
				this.orderId = id
				this.isShow1 = true
			},
			sure() {
				let _this=this
				if(this.value1==2){
					this.failMessage=''
				}else{
					this.value=''
				}
				
				this.$u.post('/index/order_confirm', {
					id: this.orderId,
					check_status: this.value1,
					check_fail_message: this.failMessage,
					evaluate:this.value
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: '确认成功'
					})
					// if(_this.value1==0){
					// 	_this.isShow = true
					// }
					
					_this.isShow1 = false
					_this.pages = 1
					_this.orderList = []
					_this.getOrderList()
					// this.orderList.splice(index,1)
				})
			}
		}
	}
</script>

<style lang="less">
	.content {
		padding-top: 0;
	}
	.order-cen view{
		font-size: 34rpx !important;
	}
	.baoxiao-tab {
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 31rpx;
		height: 80rpx;
		margin: 0 -20rpx;
		margin-top: 5rpx;
		margin-bottom: 10rpx;

	}
	.shenping{
		font-size: 35rpx;
		margin-bottom: 15rpx;
	}
	.tab-li{
		font-size: 39rpx;
	}
	.tab-li.active {
		font-weight: bold;
		color: #0055B0;
	}

	.order-li {
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		background: #fff;
	}

	.order-li-top {
		height: 111rpx;
		font-size: 33rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #F7F7F9;
		padding: 0 20rpx;
		justify-content: space-between;
	}

	.order-cen {
		padding: 40rpx 20rpx;
		border-bottom: 1px solid #F7F7F9;

		view {
			color: #7C7C7C;
			font-size: 28rpx;
		}
	}

	.order-bot {
		height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		button {
			margin: 0;
		}

		padding: 0 20rpx;
	}

	.btn1,
	.btn2 {
		width: 150rpx;
		height: 65rpx;
		border: 1px solid #333;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 29rpx;
		font-weight: 500;
		margin-left: 30rpx !important;
	}

	.type {
		color: #0055B0;
	}

	.btn2 {
		color: #0055B0;
		border: 1px solid #0055B0;
	}
	.warp {
		padding: 30rpx;
	}
	textarea {
		background-color: #F6F6F6;
		width: 94%;
		padding: 18rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}
	.slot-content {
		padding: 20rpx 40rpx;
	}
</style>
